<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue-study</title>
		<link rel="stylesheet" type="text/css" href="./css/animate.css">
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<script src="./js/vue.js"></script>
	</head>
<body>
<hr>






<!-- <div id="hook-arguments-example" v-demo2="{ color: 'red', text: 'hello!' }">阿斯顿</div> -->



<!-- <div id="hook-arguments-example" v-demo:foo.a.b="message"></div> -->


<!-- <div id="demo">

	<input v-focus>

	<anchored-heading :lev="3" :level="1">
		Hello world!
	</anchored-heading>


	<anchored>

	</anchored>
</div> -->

<!-- <script type="text/x-template" id="anchored-heading-template">
	<div>
		<h1 v-if="level == 1">
			<slot>1</slot>
		</h1>
		<h2 v-if="level == 2">
			<slot>2</slot>
		</h2>
		<h3 v-if="level == 3">
			<slot>3</slot>
		</h3>
		<h4 v-if="level == 4">
			<slot>4</slot>
		</h4>
		<h5 v-if="level == 5">
			<slot>5</slot>
		</h5>
		<h6 v-if="level == 6">
			<slot>6</slot>
		</h6>
	</div>
</script> -->













<!-- <script src="https://unpkg.com/tween.js@16.3.4"></script>
<div id="animated-number-demo">
	<input v-model.number="number" type="number" step="20">
	<p>{{ animatedNumber }}</p>
</div>
 -->


<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="staggered-list-demo">
	<input v-model="query">
	<transition-group
		name="staggered-fade"
		tag="ul"
		v-bind:css="false"
		v-on:before-enter="beforeEnter"
		v-on:enter="enter"
		v-on:leave="leave"
	>
		<li
			v-for="(item, index) in computedList"
			v-bind:key="item.msg"
			v-bind:data-index="index"
		>{{ item.msg }}</li>
	</transition-group>
</div> -->





<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="list-complete-demo" class="demo">
	<button v-on:click="shuffle">Shuffle</button>
	<button v-on:click="add">Add</button>
	<button v-on:click="remove">Remove</button>
	<transition-group name="list-complete" tag="p">
		<span
			v-for="item in items"
			v-bind:key="item"
			class="list-complete-item"
		>
			{{ item }}
		</span>
	</transition-group>
</div> -->





<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="flip-list-demo" class="demo">
	<button v-on:click="shuffle">Shuffle</button>
	<transition-group name="flip-list" tag="ul">
		<li v-for="item in items" v-bind:key="item">
			{{ item }}
		</li>
	</transition-group>
</div>

 -->


<!-- 
<div id="list-demo" class="demo">
	<button v-on:click="add">Add</button>
	<button v-on:click="remove">Remove</button>
	<transition-group name="list" tag="p">
		<span v-for="item in items" v-bind:key="item" class="list-item">
			{{ item }}
		</span>
	</transition-group>
</div>


 -->



<!-- <div id="example-4">
	<button @click="show = !show">
		Toggle
	</button>
	<transition
		v-on:before-enter="beforeEnter"
		v-on:enter="enter"
		v-on:leave="leave"
		v-bind:css="true"
	>
		<p v-if="show">
			Demo
		</p>
	</transition>
</div>
 -->




<!-- 
<div id="example-3">
	<button @click="show = !show">
		Toggle render
	</button>
	<transition
		name="custom-classes-transition"
		enter-active-class="animated tada"
		leave-active-class="animated hinge"

		v-on:before-enter="beforeEnter"
		v-on:enter="enter"
		v-on:after-enter="afterEnter"
		v-on:enter-cancelled="enterCancelled"

		v-on:before-leave="beforeLeave"
		v-on:leave="leave"
		v-on:after-leave="afterLeave"
		v-on:leave-cancelled="leaveCancelled"
	>
		<p v-if="show">hello</p>
	</transition>
</div> -->





<!-- <div id="example-2">
	<button @click="show = !show">Toggle show</button>
	<transition name="bounce">
		<p v-if="show">Look at me!</p>
	</transition>
</div> -->



<!-- <div id="example-1">
	<button @click="show = !show">
		Toggle render
	</button>
	<transition name="slide-fade">
		<p v-if="show">hello</p>
	</transition>
</div>



<div id="demo">
	<button v-on:click="show = !show">
		Toggle
	</button>
	<transition name="fade">
		<p v-if="show">hello</p>
	</transition>
</div>
 -->


<!-- <div id="example">
	<my-component></my-component>
</div> -->




<!-- <div id="qwe">
	<example v-bind:todo="massage"></example>
</div> -->



<!-- <ol id='qwe'>
	<todo-item1></todo-item1>
</ol>
 -->

<!-- <div id="app-7">
	<ol>
		<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
	</ol>
</div> -->

<!-- <div id="example">{{message}}</div> -->


<!-- <div id="example-3">
	<select v-model="qwe">
		<option v-for="option in options" v-bind:value="option.value">
			{{ option.text }}
		</option>
	</select>
	<span>Selected: {{ qwe }}</span>
	<br>

	<select v-model="selected">
		<option>A</option>
		<option>B</option>
		<option>C</option>
	</select>
	<span>Selected: {{ selected }}</span>
	<br>

	<input type="radio" id="one" value="One" v-model="picked">
	<label for="one">One</label>
	<br>
	<input type="radio" id="two" value="Two" v-model="picked">
	<label for="two">Two</label>
	<br>
	<span>Picked: {{ picked }}</span>
	<br>
	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	<label for="jack">Jack</label>
	<input type="checkbox" id="john" value="John" v-model="checkedNames">
	<label for="john">John</label>
	<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
	<label for="mike">Mike</label>
	<br>
	<span>Checked names: {{ checkedNames }}</span>
	<br>

	<button v-on:click="say('hi')">Say hi</button>
	<button v-on:click="say('what')">Say what</button>
	<div v-on:click.capture="doThis">。。。</div>
	<a v-on:click.once="doThis">。。。</a>
	<br>
	<input v-on:keydown.right="submit">
	<br>
	<input v-model="message" placeholder="edit me">
	<p>Message is: {{ message }}</p>
	<br>
	<span>Multiline message is:</span>
	<p style="white-space: pre">{{ message1 }}</p>
	<br>
	<textarea v-model="message1" placeholder="add multiple lines"></textarea>
</div> -->




<!-- <div id="example-2">
	<button v-on:click="greet">Greet</button>
</div> -->




<!-- <div id="example-1">
	<button v-on:click="add()">增加 1</button>
	<p>这个按钮被点击了 {{ counter }} 次。</p>
</div> -->

	<!-- <div id="todo-list-example">
		<input
			v-model="newTodoText"
			v-on:keyup.enter="addNewTodo"
			placeholder="Add a todo"
		>
		<ul>
			<li
				is="todo-item"
				v-for="(todo, index) in todos"
				v-bind:title="todo"
				v-on:remove="todos.splice(index, 1)"
			></li>
		</ul>
	</div> -->

<hr>


 <!--    <div id="app">
		{{ message }}
		<div v-html="rawHtml"></div>
	</div>

	<div id="app-2">
		<span v-bind:title="message">
			Hover your mouse over me for a few seconds to see my dynamically bound title!
		</span>
	</div>

	<div id="app-3">
		<p v-if="seen">Now you see me</p>
	</div>

	<div id="app-4">
		<ol>
			<li v-for="todo in todos">
				{{ todo.text }}
			</li>
		</ol>
	</div>

	<div id="app-5">
		<p>{{ message }}</p>
		<button v-on:click="reverseMessage">Reverse Message</button>
	</div>

	<div id="app-6">
		<p>{{ message }}</p>
		<p v-once>This will never change: {{ message }}</p>
		<p>{{ message.split('').reverse().join('') }}</p>
		<input v-model="message">
	</div>


	<ol>
		<todo-item1></todo-item1>

		<p>This is a todo</p>
	</ol>




	<div id="app-7">
		<ol>
			<todo-item v-for="item in groceryList" v-bind:todow="item"></todo-item>
		</ol>
	</div>


	<div id="example">
		<p>Original message: "{{ message }}"</p>
		<p>Computed reversed message: "{{ reversedMessage }}"</p>
		<p>Reversed message: "{{ reverseMessage() }}"</p>
		<p>Now is : "{{ now }}"</p>
	</div>


	<div id="demo">{{ fullName }}</div>



	<div id="watch-example">
		<p>
			Ask a yes/no question:
			<input v-model="question">
		</p>
		<p>{{ answer }}</p>
	</div>


	<ul id="example-1">
		<li v-for="item in items">
			{{ item.message }}
		</li>
	</ul>


	<ul id="example-2">
		<li v-for="(item, index) in items">
			{{ parentMessage }} - {{ index }} - {{ item.message }}
		</li>
	</ul>

	<ul id="repeat-object" class="demo">
		<li v-for="value in object">
			{{ value }}
		</li>

		<div v-for="(value, key) in object">
			{{ key }} : {{ value }}
		</div>

		<div v-for="(value, key, index) in object">
			{{ index }}. {{ key }} : {{ value }}
		</div>

		<div>
			<span v-for="n in 10">{{ n }}</span>
		</div>
	</ul>
 -->

</body>

	<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
		<script src="./js/script.js"></script>
</html>
